<template>
  <div class='container'>
    
      <el-form :model="formData" ref="formData" label-width="200px">
        <fieldset class="contain-box">
          <legend class="contain-title">确认ITMC出口局</legend>
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="是否调整ITMC(为受理时填报的出口局):"
                    prop="reAmountCause"
                >
                  <el-select v-model="arr[0]['202106-225'].value"  placeholder="请选择" @change="itmcChange">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                  </el-select>
                    <p>为保证受理填报的出入口局与A端境内方案的出入口局一致</p>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                <el-form-item
                    label="出口局"
                    prop="reAmountCause"
                >
                     <el-select v-model="arr[0]['202106-225'].NODE_ID" placeholder="请选择" @change="exportAgencyChange">
                        <el-option
                        v-for="item in exportAgencyArr"
                        :key="item.LOCATION_ID"
                        :label="item.NODE_NAME"
                        :value="item.NODE_ID"
                        :commonRegionId="item.COMMON_REGION_ID">
                        </el-option>
                    </el-select>
                    <p>请确认出入口局。系统将以确认的出入口局为准</p>
                </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item
                    label="原因"
                    prop="reAmountCause"
                >
                    <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="arr[0]['202106-225'].proposeComment"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
              </el-row>
               
        </fieldset>
      </el-form>
    
    <span slot="footer" class="dialog-footer">
      <div class="text-c">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitDialogHandel(arr[0]['202106-225'].value)">确 定</el-button>
      </div>
    </span>
  </div>
</template>

<script>
import prodInfo from "@/utils/packet";
import orderSevers from "@/api/order/AendFilling";
import { mapState } from "vuex";
  export default {
     props: {
      ODKInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      CTOInfo: {
        type: [Array, Object],
        default: () => {
          return [];
        },
      },
    },
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
        formData: {
          reAmountCause: "",
          value: ""
        },
      
      exportAgencyArr:[
        {
          "LOCATION_ID":"25977",
          "NODE_NAME":"广州",
          "ORG_ID":"1944680",
          "NODE_ID":"106471762",
          "COMMON_REGION_ID":"500181405"
        },
        {
          "LOCATION_ID":"25978",
          "NODE_NAME":"广州",
          "ORG_ID":"1944680",
          "NODE_ID":"106471763",
          "COMMON_REGION_ID":"500181406"
        }
      ],
  
       //  封装报文
      arr: [
        {
     
          "202106-225": {
           type: 'Ipt',
           name: '原因',
            tableName: "modProposeItmc",
            orderItemId: "",
            proposeComment: "",
            value: "1",
            id: "202106-225",
            nodeId:"1",
            nodeName:"",
            staffId: "100",
            custId:"1",
            colId:"isImtc"
          },
         
        }
      ],
      
      selectValue:"",
      selectObj:{},
      options:[
        {
          value:"1",
          label:"是"
        },
        {
          value:"0",
          label:"否"
        }
      ]
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
      // 监听属性 类似于data概念
  
    mounted () {
      this.executeSqlInitValue()
    },
    // 方法集合
    methods: {

      closeDialog(){
        
        
      },

      // 是否调整ITMC(为受理时填报的出口局)
      itmcChange(val){
        
        
        if(val=="1"){
           // 调整ITMC信息
           this.arr[0]['202106-225'].tableName="modProposeItmc"
        }else if(val=="0"){
          // 不调整ITMC信息
           this.arr[0]['202106-225'].tableName="noModProposeItmc"
        }
        this.arr[0]['202106-225'].value=val;
      },
      // 出口局
      exportAgencyChange(val){
       let obj = {};
        this.exportAgencyArr.forEach(function(item,index){
          obj["LOCATION_ID"]=item.LOCATION_ID;
          obj["NODE_NAME"]=item.NODE_NAME;
          obj["NODE_ID"]=item.NODE_ID;
          obj["COMMON_REGION_ID"]=item.COMMON_REGION_ID;
          obj["ORG_ID"]=item.ORG_ID
        })
        this.selectObj=obj;
        let key;
         for(key in this.arr[0]){
             this.arr[0][key].nodeId=this.selectObj.NODE_ID;
             this.arr[0][key].nodeName=this.selectObj.NODE_NAME;
          } 
      },
      // 提交表单
      submitDialogHandel(seletValue){
        
        var that=this
         let result = [];
           that.arr.forEach(function(item, index) {     
            for (let key in item) {
              result.push(item[key]);
                      
              }
          });
          seletValue=that.arr[0]['202106-225'].value;
          let params = prodInfo.confirmaSideOnshoreSolution(result,seletValue,this.ODKInfo,this.CTOInfo,this.user,this.selectObj);
          
          this.confirmDomPropose(params);
          if(params.code==200){
            this.$emit('update:show',false);
          }else{
             this.$notify.error({
              title: "错误",
              message: response.msg,
            });
          }
        
      },


      // a端境内填报方案-保存
      async confirmDomPropose(params){
        
         const response = await orderSevers.confirmDomPropose(params);
         
      },
      async executeSqlInitValue(){
        let data2={
             "custId":this.user.custId,
             "orderItemId":this.CTOInfo.orderItemId
           }
          let str=JSON.stringify(data2);

        let params={
           sqlId: "2021062704",
           params:str
           
        }
          const response = await orderSevers.executeSql(params);
          this.exportAgencyArr=res.contractRoot.svcCont.resultObject.executeSqlResps;   
      }
    },
    // 监听属性 类似于data概念
   // 监听属性 类似于data概念
  computed: {
		...mapState("orders", ["orderItemList"]),
		...mapState("user", ["user"]),
	},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
  .contain-box {
  padding: 0.2rem;
  border: 1px solid #f56f3c;
}
.contain-title {
  margin-left: 0.4rem;
  padding: 0 0.1rem;
}
.radioBtn {
  padding-left: 0.2rem;
}
.el-alert{
    margin-bottom:0.1rem;
}
.text-c {
  text-align: center;
  margin: 0.2rem 0;

}
.text-r{
    text-align:right;
}

</style>